<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>182</title>
</head>
<style>
  /* 包含外边距 */
  * {
    box-sizing: border-box;
  }
  body {
    --h: 212deg;
    --l: 43%;
    --brandColor: hsl(var(--h), 71%, var(--l));
    font-family: Montserrat, sans-serif;
    margin: 0;
    background-color: whitesmoke;
  }
  p {
    margin: 0;
    line-height: 1.6;
  }

  ol {
    list-style: none;
    counter-reset: list;
    padding: 0 1rem;
  }

  li {
    --stop: calc(100% / var(--length) * var(--i));
    --l: 62%;
    --l2: 88%;
    --h: calc((var(--i) - 1) * (180 / var(--length)));
    --c1: hsl(var(--h), 71%, var(--l));
    --c2: hsl(var(--h), 71%, var(--l2));
    
    position: relative;
    counter-increment: list;
    max-width: 45rem;
    margin: 2rem auto;
    padding: 2rem 1rem 1rem;
    box-shadow: 0.1rem 0.1rem 1.5rem rgba(0, 0, 0, 0.3);
    border-radius: 0.3rem;
    overflow: hidden;
    background-color: white;
  }
  li::before {
    content: '';
    display: block;
    width: 100%;
    height: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop));
  }
  h3 {
    display: flex;
    align-items: baseline;
    margin: 0 0 1rem;
    color: rgb(70 70 70);
  }
  h3::before {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
    content: counter(list);
    padding: 1rem;
    border-radius: 50%;
    background-color: var(--c1);
    color: white;
  }
  @media (min-width: 40em) {
    li {
      margin: 3rem auto;
      padding: 3rem 2rem 2rem;
    }
    
    h3 {
      font-size: 2.25rem;
      margin: 0 0 2rem;
    }
    
    h3::before {
      margin-right: 1.5rem;
    }
  }
</style>
<!-- 移动端适配保证兼容性 -->
<body>
  <ol style="--length: 5" role="list">
    <li style="--i: 1">
      <h3>第一步：HTML+CSS</h3>
      <p>作为前端工程师，需要掌握哪些技能？掌握HTML和CSS的基础知识，能够编写符合标准的网页。</p>
    </li>
    <li style="--i: 2">
      <h3>第二步：JavaScript</h3>
      <p>作为前端工程师，需要掌握哪些技能？掌握JavaScript的基础语法和常用API，能够编写交互性强的网页。</p>
    </li>
    <li style="--i: 3">
      <h3>第三步：框架和库</h3>
      <p>作为前端工程师，需要掌握哪些技能？掌握常用的前端框架和库，如React、Vue、jQuery等，能够快速开发高质量的网页。</p>
    </li>
    <li style="--i: 4">
      <h3>第四步：前端工具</h3>
      <p>作为前端工程师，需要掌握哪些技能？掌握常用的前端工具，如Webpack、Gulp、Grunt等，能够提高开发效率和代码质量。</p>
    </li>
    <li style="--i: 5">
      <h3>第五步：前端性能优化/跨平台开发</h3>
      <p>作为前端工程师，需要掌握哪些技能？了解前端性能优化的基本原理和方法，能够优化网页的加载速度和响应速度。了解移动端和PC端的差异，能够开发适配不同平台的网页。</p>
    </li>
  </ol>
</body>
</html>